<template>
  <div>
    <!-- 这是轮播图 -->
    <mt-swipe :auto="4000">
      <!--在组件中，使用v-for循环，一定要使用key-->
      <!-- 谁使用此轮播图组件，谁为我们传递 lunbotuList -->
      <!-- 此时，lunbotuList 应该是 父组件 向 子组件传值来设置-->
      <mt-swipe-item v-for="item in lunbotuList" :key="item.id">
        <img :src="item.img" alt :class="{full:isfull}" />
      </mt-swipe-item>
    </mt-swipe>
  </div>

  <!-- 为什么 商品评论中的轮播图 那么丑-->
  <!-- 1. 首页中的图片，它的宽和高 都是使用了100%宽度 -->
  <!-- 2. 在商品详情页面中，轮播图的图片，如果也使用 宽高为 100% 的话，页面不好看 -->
  <!-- 3. 商品详情页面中的轮播图， 期望 高度是100%，但是 宽度为自适应-->
  <!-- 4. 经过分析，得到问题原因：首页中的轮播图和详情中的轮播图分歧点是 宽度如何设置 -->
  <!-- 5. 既然这两个轮播图，其它方面都是没有冲突的，只是宽度有分歧，那么我们可以定义一个属性，
  让使用轮播图的调用者，手动指定 是否为 100% 的宽度-->
</template>

<script>
export default {
  props: ["lunbotuList", "isfull"]
};
</script>

<style lang="scss" scoped>
.mint-swipe {
  height: 200px;
  .mint-swipe-item {
      text-align: center;
    img {
      height: 100%;
    }
  }

  .full {
    width: 100%;
  }
}
</style>